コンポーネント集（装飾編）記事ページと固定ページの装飾

2022.11.02

#css #コンポーネント集 #サンプルコード #ページ作成 #記事を書くとき

htmlにclassを入れると装飾のスタイルがつかえます。
このテーマでコンポーネントを使いたい方は「再利用ブロック」に登録して活用いただけると大変便利です◎

再利用ブロックを活用してラクラク投稿しよう

Gutenbergの「再利用ブロック」を活用するとページ作成がラクラク使い回ししたいパーツを登録しよう

記事作成でつかえる、コンポーネントいろいろ

テキスト
マーカー
ボックスレイアウト
表組み
ボタン・リンク
ブログカード（カード型リンク）

テキスト

ベースの文字サイズ – 16px

大きい文字サイズ – 18px

<span class="text-l">大きい文字サイズ - 18px</span>

小さい文字サイズ – 13px

<span class="text-s">小さい文字サイズ - 13px</span>

※注釈 – 12px

<span class="text-note">※注釈 - 12px</span>

マーカー

強調したいところに入れます

<p><span class="marker as_blue_bolder">強調したいところ</span>に入れます</p>

強調したいところに入れます

<p><span class="marker as_yellow_bolder">強調したいところ</span>に入れます</p>

強調したいところに入れます

<p><span class="marker as_blue_lighter">強調したいところ</span>に入れます</p>

強調したいところに入れます

<p><span class="marker as_yellow_lighter">強調したいところ</span>に入れます</p>

ボックス（枠囲み）

囲み線のボックス

<div class="box as_border">
<p>囲み線のボックス</p>
</div>

ライトグレーのボックス

<div class="box as_gray">
<p>ライトグレーのボックス</p>
</div>

水色のボックス

<div class="box as_blue">
<p>水色のボックス</p>
</div>

クリーム色のボックス

<div class="box as_cream">
<p>クリーム色のボックス</p>
</div>

囲み線で背景がライトグレーの組み合わせ

<div class="box as_gray as_border">
<p>囲み線で背景がライトグレーの組み合わせ</p>
</div>

表組み

通常、表組みは２列でこのように表示されます。

ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。
ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。

<table>
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
</table>

classを入れると3列にできます。

ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。
ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。

<table class="as_3col">
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
</table>

背景ありの表タイプです。「type-list」のclassを使うと2列でも3列でも◎

ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。
ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。

ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。
ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。	ダミーです。ダミーです。ダミーです。ダミーです。

<table class="as_3col type-list">
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
 <tr>
  <th>ダミーです。ダミーです。ダミーです。ダミーです。</th>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
  <td>ダミーです。ダミーです。ダミーです。ダミーです。</td>
 </tr>
</table>

ボタン・リンク

テキストが長いボタン

<div class="ge-button as_large">
<a href="/">テキストが長いボタン</a>
</div>

ボタン

<div class="ge-button as_small">
<a href="/">ボタン</a>
</div>

詳しくはこちら

<div class="arrow-button">
<a href="/">詳しくはこちら</a>
</div>

大きめの詳しくはこちら

<div class="arrow-button text-l">
<a href="/">大きめの詳しくはこちら</a>
</div>

小さめの詳しくはこちら

<div class="arrow-button text-s">
<a href="/">小さめの詳しくはこちら</a>
</div>

ブログカード（カード型リンク）

ブログカードは、別の記事を紹介したいときに使うカード型のパネルです。
記事のリンクを貼りますが、このように

着せ替えで変身。子テーマで簡単イメチェン。

子テーマを設置するだけで簡単イメチェン。着せ替えして遊べます◎

アイキャッチ画像とタイトルと、リンクが必要。
これをhtmlでコードを投稿記事に直書きしてしまうと、画像やタイトルなどを変更したときに都度修正が必要になってしまうので、ちょっと管理に難が。

<div class="link-panel">
    <a href="/theme-dress-up/">
        <div class="link-panel_thumb">
            <img src="/wp-content/uploads/2022/11/thumb.jpg">
        </div>
        <div class="link-panel_desc">
            <h4>着せ替えで変身。子テーマで簡単イメチェン。</h4>
            <p>子テーマを設置するだけで簡単イメチェン。着せ替えして遊べます◎</p>
        </div>
    </a>
</div>

プラグインもありますが、簡単に埋め込みができるよう、ショートコードを作りました。
指定した投稿のURL、タイトル、アイキャッチ画像を呼び出して引っ張ってくるので、記事のタイトルやURL、画像が変わった場合には、変更後のものを引っ張ってきます。管理が楽なのでぜひ。